<template>
  <div>
    <div>基本资料</div>

    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="登录名称">
        <el-input :value="ruleForm.username" readonly />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="ruleForm.nickname" />
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modify"> 提交修改 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'
import { updateUserInfo, getUserInfo } from '@/api/UserInfo.js'
import { ElMessage } from 'element-plus'

const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const ruleForm = ref({
  id: '',
  username: '',
  password: '',
  nickname: '',
  email: '',
  user_pic: ''
})
const rules = ref([])

onMounted(() => {
  getUserInfoFun()
})

// 获取用户基本信息
const getUserInfoFun = async () => {
  const res = await getUserInfo(ruleForm.value.id ? ruleForm.value.id : userInfo.id)
  if (res.status === 0) {
    ruleForm.value = res.data
  }
}

// 更新用户的基本信息
const modify = async () => {
  const res = await updateUserInfo(ruleForm.value)
  if (res.status === 0) {
    ElMessage({
      message: res.message,
      type: 'success'
    })
  }
}
</script>
  
<style scoped lang="scss">
</style>
  